<template>
  <div class="category-page">
    <search class="search" />
    <div class="main">
      <div class="menu">
        <v-menu :menu="cache.firstLevel" :current="currentMenuIndex" @clickMenu="clickMenu" />
      </div>
      <div class="right">
        <div class="swiper">
          <swiper :swiper="cache.swiper" />
        </div>
        <div class="list">
          <list :list="list" />
        </div>
      </div>
    </div>
    <loading :show="loading" />
    <arrow />
  </div>
</template>

<script>
import Search from '@/components/Search'
import api from '@/api'
import base64 from '@/util/base64'
import Loading from '@/components/Loading'
import Arrow from '@/components/Arrow'
import Swiper from './components/Swiper'
import Menu from './components/Menu'
import List from './components/List'
// import { mapGetters } from 'vuex'
export default {
  name: 'Category',
  components: {
    Search,
    Loading,
    Arrow,
    Swiper,
    'v-menu': Menu,
    List
  },
  data() {
    return {
      loading: false,
      list: [],
      currentMenuIndex: 0,
      cache: {
        menu: [],
        list: []
      },
      selectId: 0
    }
  },
  // computed: {
  //   ...mapGetters({
  //     cache: 'Category/cate'
  //   })
  // },
  methods: {
    /**
     * get uni cache data (swiper & firstLevel)
     * 1) vuex
     * 2) localstorage
     * 3) redis
     * 4) db
     */
    fetchData() {
      // const data = this.$store.getters['Category/cate']
      // if (data === null) {
      //   this.loading = true
      //   api.Uni.categoryPage().then(response => {
      //     let { data } = response
      //     data = base64.parse(data)
      //     this.$store.dispatch('Category/set_data', data).then(() => {
      //       this.cache = data
      //       this.firstSelect()
      //       console.log(data)
      //     })
      //   }).finally(() => {
      //     this.loading = false
      //   })
      // } else {
      //   this.cache = data
      //   this.firstSelect()
      // }
      this.loading = true
      api.Uni.categoryPage().then(response => {
        let { data } = response
        data = base64.parse(data)
        this.cache = data
        this.firstSelect()
        console.log(data)
      }).finally(() => {
        this.loading = false
      })
    },
    /**
     * first children list
     */
    firstSelect() {
      if (this.selectId === 0) {
        this.list = [...this.cache.firstChildren]
        if (this.cache.firstLevel.length > 0) {
          const id = this.cache.firstLevel[0].id
          this.getList(id)
        }
      } else {
        this.cache.firstLevel.forEach((v, i) => {
          if (+v.id === +this.selectId) {
            this.clickMenu({
              item: v,
              index: i
            })
          }
        })
      }
    },
    /**
     * click menu
     */
    clickMenu(v) {
      const { item, index } = v
      this.currentMenuIndex = index
      const id = item.id
      this.getList(id)
    },
    /**
     * get children list
     */
    getList(id) {
      this.loading = true
      api.Product.getOneProduct({ parent_id: id }).then(response => {
        let { data } = response
        data = base64.parse(data)
        // console.log(data)
        this.list = [...data.list]
      }).finally(() => {
        this.loading = false
      })
    }
  },
  created () {
    if (this.$route.params.id) {
      this.selectId = this.$route.params.id
    }
    this.fetchData()
  }
}
</script>

<style scoped lang="stylus">
.category-page
  background white
  .search
    position fixed
    width 100%
  .main
    display flex
    padding-top 70px
    .menu
      width 100px
      background $background_color
    .right
      flex 1
      padding 10px
      overflow hidden
      .swiper
        margin-bottom 10px
      .list
        display flex
</style>
